<template>
  <div class="dealer-detail">
    <div class="dealer-detail-container paddingSet"
         style="padding-bottom: 0;">
      <div class="dealer-detail-item dealer-detail-info boederSet"
           v-if="dealerInfo.listCustomer">
        <div class="detail-info-item">
          <div class="info-itemContainer"
               style="border-bottom: 1px solid #E0E8EF;font-weight:bold;color:#333;">
            销售门店({{dealerInfo.listCustomer.shopName}})客情
          </div>
        </div>
        <div class="detail-info-item">
          <div class="info-itemContainer info-items">
            <div class="info-itemSet">
              <div class="info-itemSetName">
                经销商/代理商:
              </div>
              <div class="info-itemSetIn">
                {{dealerInfo.listCustomer.dealerName}}
              </div>
            </div>
            <div class="info-itemSet">
              <div class="info-itemSetName">
                经营品牌:
              </div>
              <div class="info-itemSetIn">
                {{dealerInfo.listCustomer.brand}}
              </div>
            </div>
            <div class="info-itemSet">
              <div class="info-itemSetName">
                经营状况:
              </div>
              <div class="info-itemSetIn">
                {{dealerInfo.listCustomer.businessStatus}}
              </div>
            </div>
            <div class="info-itemSet">
              <div class="info-itemSetName">
                所在城市:
              </div>
              <div class="info-itemSetIn">
                {{dealerInfo.listCustomer.province}}-{{dealerInfo.listCustomer.city}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dealer-detail-item dealer-detail-infoList boederSet"
           v-if="dealerInfo.listCustomerInfo">
        <div class="distributor distributorHeader">
          <div class="distributorHeaderItem"
               style="font-weight:bold;">
            经销商/代理商信息({{dealerInfo.listCustomerInfo.length}}条信息)
          </div>
          <div class="distributorHeaderItem distributorHeaderSearch">
            <div class="flex-container">
              <el-radio-group size="small"
                              v-model="selectMonth"
                              @change="timeSelect">
                <el-radio-button label="lastQuarter">最近3个月</el-radio-button>
                <el-radio-button label="lastMonth">最近1个月</el-radio-button>
              </el-radio-group>
            </div>
            <div class="flex-container"
                 style="margin: 0 30px;align-items: center">
              <label class="mineSetLabel">选择日期</label>
              <el-date-picker style="width:250px;"
                              @change="daterange"
                              v-model="productType"
                              value-format="yyyy-MM-dd"
                              size="small"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="distributor distributorList">
          <div class="distributorListItem"
               v-for="(item,index) in distributorListItems"
               :key="index">
            <div class="ListItemContainer ListItemContainerHeader">
              <div class="ListItemContainerLeft">{{item.situationDescription}}</div>
              <div class="ListItemContainerRight">{{item.creatorName}}</div>
            </div>
            <div class="ListItemContainer">
              <div class="ListItemContainerLeft ListItemContainerImage">
                <div class="ListItemImage"
                     v-for="(its, index) in item.attachmentUrl"
                     :key="`${index}Set`">
                  <img class="ListItemImageSet"
                       :src="its"
                       alt="">
                </div>
              </div>
              <div class="ListItemContainerRight">
                <div class="itemRight">{{item.createTime}}</div>
                <div class="itemRight itemRightSet">
                  <div class="itemRightSetItem"><span style="margin-right: 6px;">销售员:</span><span>{{item.creatorName}}</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dealer-detail-item">
        <div class="paginationSet">
          <div class="pagination-container">
            <div class="toStart"
                 @click="setCurrentPage">首页</div>
            <el-pagination background
                           @current-change="getLists"
                           layout="prev, pager, next"
                           :current-page.sync="currentPage"
                           :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as opreator from 'api/getData'

export default {
  name: "dealer-detail",
  data () {
    return {
      currentPage: 1,
      distributorListItems: [],
      dealerInfo: '',
      selectMonth: 'lastQuarter',
      productType: '',
      total: 1
    }
  },
  props: ['channelId'],
  mounted () {
    this.getDataSet()
  },
  methods: {
    setCurrentPage () {
      this.currentPage = 1
      this.getDataSet(this.productType[0] ? this.productType[0] : this.selectMonth, this.productType[1])
    },
    timeSelect (newVal) {
      this.productType = ''
      this.getDataSet(newVal)
    },
    daterange (newVal) {
      this.selectMonth = ''
      this.getDataSet(...newVal)
    },
    getDataSet (firstTime, lastTime) {
      let param = {
        shopId: this.channelId,
        firstTime: firstTime,
        lastTime: lastTime,
        pageNumber: this.currentPage
      }
      opreator.offineDealer(param).then(res => {
        if ('200' == res.code) {
          this.dealerInfo = res.data
          let { page } = res.data
          this.total = page.totalRecord
          this.distributorListItems = Array.isArray(page.list) ? page.list.map(v => {
            let tempSet = v.attachmentUrl.replace(/\[|\]|\"|\'/g, '')
            return { ...v, attachmentUrl: tempSet ? tempSet.split(',') : [] }
          }) : []
        }
      })
    },
    getLists () {
      this.getDataSet(this.productType[0] ? this.productType[0] : this.selectMonth, this.productType[1])
    }
  }
}
</script>

<style scoped>
.dealer-detail-container,
.dealer-detail-item {
  display: flex;
  flex-direction: column;
}
.dealer-detail-info {
  padding: 2px 12px;
  margin-bottom: 12px;
}
.info-itemContainer {
  height: 35px;
  line-height: 35px;
}
.info-items,
.info-itemSet {
  display: flex;
  font-weight: bold;
}
.info-itemSet {
  flex: 1;
}
.info-itemSetName {
  margin-right: 6px;
  color: #606266;
}
.info-itemSetIn {
  color: #333;
}
.distributorHeader {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  align-items: center;
}
.distributorHeaderSearch {
  height: 40px;
  display: flex;
  align-items: center;
}
.distributorList {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}
.distributorListItem {
  border-top: 1px solid #e0e8ef;
  padding: 6px 0;
}
.ListItemContainer {
  display: flex;
  justify-content: space-between;
}
.ListItemContainerHeader {
  height: 30px;
  align-items: center;
  margin: 6px 0;
}
.ListItemContainerRight {
  display: flex;
  flex-direction: column;
  color: #868686;
}
.ListItemContainerImage {
  display: flex;
}
.itemRightSet {
  display: flex;
  flex-direction: column;
}
.ListItemImage {
  width: 72px;
  height: 72px;
  padding: 12px;
}
.ListItemImageSet {
  width: 100%;
  height: 100%;
}
.itemRightSet .itemRightSetItem {
  display: flex;
  justify-content: flex-end;
}
</style>
